<template>
	<view class="page">
		<view class="p-4">
			<view class="flex bg-bg-grey rounded-4 p-2 mb-6">
				<view class="flex-1 text-center py-4 rounded-4">
					<view class="text-primary font-weight-600 h8">{{ dealer.user.people_num }}</view>
					<view class="h10 text-placeholder mt-2">邀请人数</view>
				</view>
				<view class="flex-1 text-center py-4 rounded-4">
					<view class="text-primary font-weight-600 h8">{{ dealer.user.order_price }}</view>
					<view class="h10 text-placeholder mt-2">订单总额</view>
				</view>
				<view class="flex-1 text-center py-4 rounded-4">
					<view class="text-primary font-weight-600 h8">{{ dealer.user.dealer_price }}</view>
					<view class="h10 text-placeholder mt-2">累计收益</view>
				</view>
			</view>
			<view class="bg-bg-grey p-6 rounded-6 flex flex-center mb-6">
				<view class="flex-1 flex">
					<view class="mr-6 text-danger">
						<view class="h10">订单</view>
						<view class="pt-4 h2 font-weight-600">{{ dealer.config.dealer_proportion }}%</view>
					</view>
					<view class="flex-1" v-if="dealer.config.dealer_level >= 1">
						<view class="h10">一级</view>
						<view class="pt-4 h6 font-weight-600">{{ dealer.config.dealer_proportion_level_1 }}%</view>
					</view>
					<view class="flex-1" v-if="dealer.config.dealer_level >= 2">
						<view class="h10">二级</view>
						<view class="pt-4 h6 font-weight-600">{{ dealer.config.dealer_proportion_level_2 }}%</view>
					</view>
					<view class="flex-1" v-if="dealer.config.dealer_level >= 3">
						<view class="h10">三级</view>
						<view class="pt-4 h6 font-weight-600">{{ dealer.config.dealer_proportion_level_3 }}%</view>
					</view>
				</view>
			</view>
            <view class="bg-bg-grey rounded-6 p-6 flex flex-column">
				<view class="flex flex-center pb-6 border-bottom">
					<view class="flex-1 h6 font-weight-600 text-white">分销链接</view>
					<!-- <view class="h10 text-primary" @tap="$page.open('/pages/dealer/poster')">分享海报</view> -->
				</view>
				<!-- #ifdef H5 -->
                <view class="py-4 flex flex-y-center" @tap="copyLink">
                    <uni-icons type="link" color="var(--xl-primary)" :size="20" />
                    <view class="text-primary flex-1 text-ellipsis-1 ml-2">{{ dealer.link }}</view>
					<view class="p-4 font-weight-600 text-primary h9">复制</view>
                </view>
				<view class="text-center mb-4 pt-4">
					<image v-if="dealer.qrcode" :src="dealer.qrcode" class="qrcode border rounded-4"/>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="text-center mb-4 pt-4">
					<image v-if="dealer.qrcode" :src="dealer.qrcode+'&platform=mp-weixin'" class="qrcode border rounded-4" show-menu-by-longpress/>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-TOUTIAO -->
				<view class="text-center mb-4 pt-4">
					<image v-if="dealer.qrcode" :src="dealer.qrcode+'&platform=mp-toutiao'" class="qrcode border rounded-4" show-menu-by-longpress/>
				</view>
				<!-- #endif -->
                <view class="text-placeholder h9 mb-4">
                    如果客户通过该链接注册本平台 ， 该客户将永久綁定为您的下级客户 ， 该客户在该平台的所有消订单会按照当前分销比例返还到您的账户中
                </view>
                <view class="text-danger h9 mb-4">
                    分销奖励计算公式：订单金额 * 订单比例 * 分销比例
                </view>
                <view class="text-placeholder h9">
                    如：订单金额100元，订单比例为20%，一级分销比例为50%，则分销奖励为：100 * 20% * 50% = 10元
                </view>
            </view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { onLoad,onShareAppMessage,onShareTimeline } from "@dcloudio/uni-app";
import { $page, $http } from '@/utils';
const dealer = ref({
	state: null,
	link: '',
	icode: '',
	qrcode: '',
	user: {
		people_num: '--',
		order_num: '--',
		order_price: '--',
		dealer_price: '--',
	},
	config: {
		dealer_apply: 'yes',
		dealer_apply_price: '',
		dealer_apply_refund: '',
		dealer_apply_refund_text: '',
		dealer_level: 0,
		dealer_proportion: 0,
		dealer_proportion_level_1: 0,
		dealer_proportion_level_2: 0,
		dealer_proportion_level_3: 0,
	},
})
onLoad((options: any) => {
	$page.title('分销中心');
	getDealer();
})
onShareAppMessage(()=>{
	return $page.shareMessage({
		path: `/pages/index/index`
	})
})
onShareTimeline(()=>{
	return $page.shareTimeline({
		path: `/pages/index/index`
	})
})
const getDealer = () => {
	$http.get('Dealer/dealer').then((res: any) => {
		if (res.code === $http.ResponseCode.SUCCESS) {
			dealer.value = res.data;
		}
	})
}
const copyLink = () => {
	uni.setClipboardData({
		data: dealer.value.link
	})
}
</script>

<style lang="scss" scoped>
.page {
	min-height: calc(100vh - var(--window-top));
}
.qrcode{
	width: 200px;
	height: 200px;
}
</style>
